<script setup>
	import { reactive } from "vue";
	import { message } from "ant-design-vue";
	import * as api from "@/api";
	import router from "@/router";

	let formstate = reactive({
		username: "",
		password: "",
	});

	function loginHandler() {
		api.login({
			name: formstate.username,
			password: formstate.password
		}).then(({ res }) => {
			if (res.code === 0 && res.data) {
				message.success("登录成功");
				localStorage.setItem("accessToken", res.data);
				router.replace("/");
			} else if (res.msg) {
				message.error(res.msg);
			} else {
				message.error("登录失败");
			}
		});
	}
</script>

<template>
	<div class="login">
		<div class="login-content">
			<div class="system-title">自动化测试平台</div>
			<div class="login-panel">
				<a-form>
					<a-form-item label="用户名" name="username" :label-col="{ span: 6 }">
						<a-input v-model:value="formstate.username" />
					</a-form-item>
					<a-form-item label="密码" :label-col="{ span: 6 }">
						<a-input-password v-model:value="formstate.password" />
					</a-form-item>
					<a-form-item :wrapper-col="{ offset: 10, span: 16 }">
						<a-button type="primary" html-type="submit" @click="loginHandler">登录</a-button>
					</a-form-item>
				</a-form>
			</div>
		</div>
	</div>
</template>

<style scoped lang="less">
	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
		.login-content {
			margin-top: -80px;
			width: 300px;
			height: 234px;
			.system-title {
				font-size: 26px;
				color: #333;
				font-weight: bold;
				text-align: center;
				margin-bottom: 20px;
			}
			.login-panel {
				width: 100%;
				height: 204px;
				padding: 30px;
				background-color: #fff;
				border-radius: 5px;
				box-shadow: 0 0 10px #ddd;
			}
		}
	}
</style>
